import { DatasetListItem } from '@/common';
import { SvgIcon } from '@/components/icon';
import useWindowWidth from '@/hooks/event/use-window-width';
import { Size } from '@/types/common';
import { getBackground } from '@/utils/tree';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Dropdown, MenuProps } from 'antd';

interface Props {
  selectedItem: DatasetListItem | undefined;
  isAdmin: boolean;
  isPermit: boolean;
  parentSize: Size;
  onDeleteClicked?: (item: DatasetListItem | undefined) => void;
  onNewClicked?: () => void;
  onNewDatasetClicked?: () => void;
}

const DatasetHeader = ({
  selectedItem,
  isAdmin,
  parentSize,
  isPermit,
  onDeleteClicked,
  onNewClicked,
  onNewDatasetClicked,
}: Props) => {
  const { isPc } = useWindowWidth();

  const itemsMore: MenuProps['items'] = [
    {
      key: '1',
      label: '删除此数据接口集',
      onClick: () => {
        onDeleteClicked && onDeleteClicked(selectedItem);
      },
    },
  ];
  return (
    <>
      <div className="flex w-full items-center p-2" style={{ fontSize: '16px' }}>
        <div className="flex items-center">
          {/* <div className="flex-shrink-0 items-center justify-center rounded-lg">
            <SvgIcon
              color="#33ADFF"
              className="mb-2 ml-2 mr-2 mt-2"
              icon="tdesign--folder-setting-filled"
              size={32}
            />
          </div> */}
          {/* <div className="flex flex-col" style={{ maxWidth: `${parentSize?.width * 0.6}px` }}>
            <span className="truncate">
              {selectedItem === undefined ? '数据接口总览' : selectedItem?.name}
            </span>
            <span className="truncate" style={{ fontSize: '12px' }}>
              {selectedItem?.openapiUrl}
            </span>
          </div> */}
        </div>

        <div className="ml-auto">
          {isAdmin && (
            <div className="flex flex-nowrap">
              <Button
                type="text"
                style={{ border: '1px solid #1B6DFA' }}
                icon={<PlusOutlined />}
                onClick={() => {
                  if (selectedItem) {
                    onNewClicked && onNewClicked();
                  } else {
                    onNewDatasetClicked && onNewDatasetClicked();
                  }
                }}
              >
                {isPc ? (selectedItem ? '新建数据接口' : '新建数据接口集') : ''}
              </Button>
              {/* {selectedItem && (
                <Dropdown
                  trigger={isPc ? ['hover'] : ['click']}
                  menu={{ items: itemsMore }}
                  placement="bottomLeft"
                  className={`${isPc ? 'mr-4' : 'mr-2'}`}
                >
                  <Button type="text" icon={<EllipsisOutlined />}></Button>
                </Dropdown>
              )} */}
            </div>
          )}
        </div>
      </div>
    </>
  );
};
export default DatasetHeader;
